<template>
  <div>
    <div class='crumbs'>
      <el-breadcrumb separator='/'>
        <el-breadcrumb-item><i class='el-icon-download'></i> 下载中心</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class='container'>
      <!-- 上传 -->
      <div style='margin-bottom: 15px'>
        <!-- <span style='font-size: 14px; color: #606266; padding: 0 11px 0'>类型</span>
        <el-select
          v-model="uploadType"
          placeholder="请选择类型"
        >
          <el-option
            label="医院介绍"
            value="xxx"
          />
          <el-option
            label="项目申请模板"
            value="xx"
          />
        </el-select> -->
        <span style='font-size: 14px; color: #606266; padding: 0 11px 0 20px'>上传</span>
        <input
          type='file'
          ref="pathClear"
          @change='uploadFiles'
          name="file"
          id="file"
          style='width: 200px'
        />
        <el-button
          style="margin-left: 10px;"
          size="small"
          icon="el-icon-plus"
          type="danger"
          @click="submitUpload"
        >添 加</el-button>
      </div>
      <!-- 查询 -->
      <el-form
        ref="form"
        :model="form"
        label-width="50px"
        inline
      >
        <!-- <el-form-item label="类型">
          <el-input
            v-model="form.type"
            style='width: 200px'
          ></el-input>
        </el-form-item> -->
        <el-form-item label="名称">
          <el-input
            v-model="form.name"
            style='width: 200px'
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="search"
          >查 询</el-button>
          <el-button
            @click="recover"
            plain
          >恢 复</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table
        :data='DownloadList.slice((currentPage-1)*pagesize,currentPage*pagesize)'
        border
        style='width: 100%; font-size: 15px; margin: 15px 0'
      >
        <!-- <el-table-column
          prop='state'
          label='类型'
        ></el-table-column> -->
        <el-table-column
          prop='ID'
          label='文档ID'
          width="100"
        ></el-table-column>
        <el-table-column
          prop='BT'
          label='文档名称'
          min-width="200px"
        ></el-table-column>

        <el-table-column
          prop='TIMESTAMP'
          label='时间'
        >
        </el-table-column>
        <el-table-column
          label='操作'
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type='danger'
              size="mini"
              icon="el-icon-delete"
              @click="handleDel(scope.row)"
            > 删 除</el-button>
            <el-button
              type='warning'
              size="mini"
              icon="el-icon-download"
              @click="handleDown(scope.row)"
            > 下载</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15,]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="DownloadList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getDownListAPI, getUploadListAPI, getDownlistDelAPI, getDownlistDownAPI } from '@/api/backStage.js';
export default {
    data() {
        return {
            currentPage: 1, //初始页
            pagesize: 10, // 每页的数据
            uploadType: '', // 上传类型
            formData: null, // 上传内容
            file: null, // 上传文件详情
            DownloadList: [],
            ip: '',
            form: {
                type: '', // 查询类型
                name: '' // 查询名称
            }
        };
    },
    mounted() {
        this.ready();
        this.getDownList();
    },
    methods: {
        // 获取ip
        ready() {
            let cip = returnCitySN['cip'];
            let cid = returnCitySN['cid'];
            let cname = returnCitySN['cname'];
            this.ip = cip;
        },
        async getDownList() {
            const res = await getDownListAPI({
                BT: 'null',
                LX: 'null'
            });
            if ((res.code = 'succ')) {
                this.DownloadList = res.result;
            }
            if (this.DownloadList.length > 0) {
                this.DownloadList.forEach((item) => {
                    if (item.state > 4) {
                        item.state = '医院介绍';
                    } else {
                        item.state = '项目申请模板';
                    }
                });
            }
        },
        // 下载
        async handleDown(row) {
            const res = await getDownlistDownAPI({
                ID: row.ID
            });
            if (res.code == 'succ') {
                this.$message.success(res.message);
                const ele = document.createElement('a');
                ele.setAttribute('href', res.result);
                // element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(res.result));
                const str = res.result.substring(res.result);
                ele.setAttribute('download', str);
                ele.click();
            }
        },
        // 查询
        async search() {
            const res = await getDownListAPI({
                BT: this.form.name || 'null',
                LX: this.form.type || 'null'
            });
            if (res.code == 'succ') {
                this.DownloadList = res.result;
                this.form.name = '';
                this.$message.success(res.message);
            } else {
                this.$message.error(res.message);
                this.form.name = '';
            }
        },
        // 恢复
        recover() {
            if (this.form.name == '') return false;
            this.form.type = '';
            this.form.name = '';
            // this.getGcp()
        },
        // 删除
        handleDel(row) {
            this.$confirm('此操作将删除该内容, 是否继续?', '提示', { type: 'warning' })
                .then(async () => {
                    // 1.传入id,发送请求
                    const res = await getDownlistDelAPI({
                        token: this.$store.state.user.token,
                        ID: row.ID,
                        OPRID: this.$store.state.user.oprid,
                        ip: this.ip
                    });
                    if (res.code == 'succ') {
                        // 3.重新渲染数据
                        this.getDownList();
                        // 4. 提示信息
                        this.$message.success('删除成功!');
                    }
                    // 2.若当前页最后一条数据被删除时,就去自动请求上一页数据
                    // if (this.list.length === 1) {
                    //     this.params.page = Math.max(--this.params.page, 1)
                    // }
                })
                .catch(() => {
                    // 点击取消执行
                });
        },
        // 上传内容
        uploadFiles(event) {
            let file = event.target.files[0];
            this.fileInfo = file;
            let size = Math.floor(file.size / 1024); //计算文件的大小
            this.formData = new FormData(); //new一个formData事件
            this.formData.append('file', file); //将file属性添加到formData里
            this.file = file;
            //此时formData就是我们要向后台传的参数了
        },
        // 提交上传
        async submitUpload() {
            if (this.$refs.pathClear.value == '') {
                this.$message.warning('请选择上传要上传得文件');
            } else {
                let index = this.file.name.lastIndexOf('.');
                let a = this.file.name.substring(index + 1, this.file.name.length);
                if (a != 'xlsx' && a != 'docx' && a != 'doc' && a != 'pdf' && a != 'ppt') {
                    this.$message.warning('目前只支持xlsx以及docx,doc,pdf,ppt类型文档!');
                    this.$refs.pathClear.value = '';
                } else {
                    const res = await getUploadListAPI({
                        token: this.$store.state.user.token,
                        lx: '12',
                        OprID: this.$store.state.user.oprid,
                        ip: this.ip,
                        ImportFile: this.formData
                    });
                    if (res.code == 'succ') {
                        this.$message.success('上传' + res.message);
                        // 上传成功之后清除input框file的值
                        this.$refs.pathClear.value = '';
                        this.getDownList();
                    } else {
                        this.$message.error('上传失败');
                        this.$refs.pathClear.value = '';
                    }
                }
            }
        },
        // 分页
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
            this.pagesize = size;
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
        }
    }
};
</script>

<style scoped>
::v-deep .el-upload--text {
    width: 80px;
    height: 32px;
    border: none;
}
</style>
